<template>
  <div class="side-menu">
    <div class="logo">
      <img src="@/assets/logo.png" alt="">
    </div>
    <ul class="menu-list">
      <li 
        v-for="item in menuItems" 
        :key="item.key"
        :class="{ active: currentMenu === item.key }"
        @click="handleMenuClick(item.key)"
      >
        <i :class="item.icon"></i>
        <span>{{ item.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'SideMenu',
  
  data() {
    return {
      currentMenu: 'position',
      menuItems: [
        { key: 'position', label: '岗位视图', icon: 'el-icon-menu' },
        { key: 'dashboard', label: '仪表板中心', icon: 'el-icon-odometer' },
        { key: 'query', label: '口径查询', icon: 'el-icon-search' },
        { key: 'indicators', label: '指标全景视图', icon: 'el-icon-data-line' },
        { key: 'config', label: '仪表板配置', icon: 'el-icon-setting' },
        { key: 'scene', label: '场景管理', icon: 'el-icon-office-building' }
      ]
    }
  },
  
  methods: {
    handleMenuClick(key) {
      this.currentMenu = key
    }
  }
}
</script>

<style scoped>
.side-menu {
  width: 240px;
  height: 100%;
  background: #1C2B3A;
  color: #fff;
}

.logo {
  height: 60px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-list {
  list-style: none;
}

.menu-list li {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-list li:hover {
  background: rgba(255,255,255,0.1);
}

.menu-list li.active {
  background: rgba(255,255,255,0.1);
}
</style> 